/**
 * 创建于：2016-5-12
 * 创建人：杨骐彰
 * 说明： 宏
 */

//清除浮动
@mixin clear-fix() {
  &:after, &:before {
    content: '';
    display: table;
    clear: both;
  }
}

@mixin drop-zone() {
  .image-drop-zone{
    width: 9.75rem;
    height: 8.125rem;
    background-color: #f1f4f5;
    margin: auto;
    .default-wrapper{
      height: 100%;
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .image-default{
        width: 3.75rem;
        height: 3.75rem;
        margin: auto auto 0 auto;
      }
      &>span{
        font-size:14px;
        color:#999999;
        text-align:center;
        margin:0.75rem auto auto auto;
      }
    }
    .preview-img{
      height: 100%;
      width: 100%;
    }
  }
}

@mixin option-wrapper() {
  .option-wrapper{
    height: auto;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    .option-title{
      width: 4.625rem;
      height: 2.125rem;
      line-height: 2.125rem;
      text-align: center;
      margin: auto .1875rem auto 1.5625rem;
      background:#f1f4f5;
      border:1px solid #e3e8eb;
      border-radius:3px;
    }
    .option-input{
      width: 17.5rem;
      height: 2.125rem;
      background:#ffffff;
      border:1px solid #e4e9eb;
      border-radius:3px;
      margin: auto 0 auto 0;
    }
    .add-tool-div{
      width: 7.8125rem;
      margin: auto 3.3125rem auto auto;
      .ant-divider{
        font-size: .875rem;
        color:#333333;
      }
    }
    .ant-form-item{
      margin: auto 0
    }
  }
}
@mixin ant-pagination() {
  .ant-pagination{
    position: absolute;
    right: 1.875rem;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    .ant-pagination-total-text{
      margin-left: 3.875rem;
    }
  }
  .ant-pagination-item:focus, .ant-pagination-item:hover{
    background-color: white !important;
    color: #333;
    border-color:  #ff595f !important;
  }

  .ant-pagination-total-text{
    position: absolute;
    left: 0px;
    font-size:0.875rem;
    color:#333;
  }
  .ant-pagination-item-active:focus a, .ant-pagination-item-active:hover a, .ant-pagination-item-active a{
    color: #333;
  }
}

@mixin ant-menu() {
  .ant-menu-horizontal{
    border: none;
  }
  .ant-menu-horizontal>.ant-menu-item-active, .ant-menu-horizontal>.ant-menu-item-open, .ant-menu-horizontal>.ant-menu-item-selected, .ant-menu-horizontal>.ant-menu-item:hover, .ant-menu-horizontal>.ant-menu-submenu-active, .ant-menu-horizontal>.ant-menu-submenu-open, .ant-menu-horizontal>.ant-menu-submenu-selected, .ant-menu-horizontal>.ant-menu-submenu:hover{
    border-bottom: 2px solid #ff595f;
    color: #ff595f;
  }
}
@mixin title-wrapper() {
  .title-wrapper{
    width: 100%;
    height: 3.125rem;
    display: flex;
    justify-content: space-between;
    flex-direction: row;

    .title-bar{
      background-image:linear-gradient(-134deg, #fe5196 0%, #f77062 100%);
      box-shadow:0 6px 8px 0 rgba(178,178,178,0.18);
      border-radius:1px;
      width:.125rem;
      height:.875rem;
      margin: auto .625rem auto 0;
    }
    .title-text{
      font-size:.875rem;
      color:#333333;
      margin: auto auto auto 0;
    }
    .title-btn-more{
      height: 1.875rem;
      line-height: 1.875rem;
      width: 6.25rem;
      border-radius:100px;
      background-color: white;
      border:1px solid #cccccc;
      font-size:.875rem;
      color:#999999;
      margin: auto 1.25rem auto auto;
    }
    .title-btn-save{
      height: 1.875rem;
      line-height: 1.875rem;
      width: 6.25rem;
      border-radius:100px;
      background-color: white;
      border:1px solid #cccccc;
      font-size:.875rem;
      color:#999999;
      margin: auto 0 auto 0;
    }
  }
}

@mixin comment-ul() {
  .comment-ul{
    .comment-li{
      padding-bottom: .6875rem;
      margin-bottom: .5rem;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      border-bottom: 1px solid #f1f4f5;;
      .li-header{
        height: 2.5rem;
        width: 2.5rem;
        margin: auto .625rem auto 0;
      }
      .li-time{
        width: 4.6875rem;
        height: 1.0625rem;
        line-height: 1.0625rem;
        font-size: .8125rem;
        color:#8c8c8c;
        text-align: center;
        margin: 0 2.0625rem 0 0;
      }
      .li-body{
        width: calc(100% - 9.875rem);
        height: 100%;
        margin: auto;
        .nickname{
          font-size: 1rem;
          color: black;
          margin-bottom: .25rem;
        }
        .content{
          font-size: .8125rem;
          color:#8c8c8c;
        }
      }
    }
  }
}
